<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="set">设置</button>
    <button class="get">获取</button>
    <button class="del">删除</button>
    <button class="each">遍历</button>
</body>
<script>
    // webStorage (网页存储)  => HTML5新增的一种在客户端存储数据的一种方式

    // WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

    // WebStorage两个主要目标：

    // 1.提供一种在cookie之外存储会话数据的路径  (一种新的在用户本地 存储数据的方式)
    // 2.提供一种存储大量可以跨会话存在的数据的机制  (webStorage也可以跨页面访问 )
    // HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）



    // WebStorage的提供的API(属性和方法)
    // length              保存数据的数量

    // setItem(key, value) —— 保存数据，以键值对的方式存储信息 (没有就新增,有就修改)
    // getItem(key)        —— 获取数据，将键值传入，即可获取到对应的value值
    // removeItem(key)     —— 删除单个数据，根据键值移除对应的信息
    // clear()             —— 删除所有的数据
    // key(index)          —— 获取某个索引的key (对应下标找键名 => 一般用于遍历 localStorage 和  sessionStorage)

    // 也可以使用对象的语法操作  localStorage（本地存储）和sessionStorage

    // 注意: localStorage（本地存储）和sessionStorage（会话存储）的键值也只能是字符串类型,如果存储其他类型会隐式转字符串


    // 如何查看localStorage（本地存储）和sessionStorage
    // 1. 手动查看(常用于调试)   
    //   开发者工具 -> application -> storage ->  localStorage（本地存储）和sessionStorage -> 对应域名查看

    // 2.  localStorage 和  sessionStorage 是两个存储在window中子对象 => 直接使用
    // console.log(localStorage);
    // console.log(sessionStorage);



    var get = document.getElementsByClassName("get")[0];
    var set = document.getElementsByClassName("set")[0];
    var del = document.getElementsByClassName("del")[0];
    var each = document.getElementsByClassName("each")[0];

    set.onclick = function () {
        localStorage.setItem("user", "a123123");
        localStorage.setItem("pwd", "123123");

        localStorage.phone = "17386141517";
        localStorage.email = "123132@qq.com";

        var arr = [1, 2, 3];
        var obj = { a: 1, b: 2, c: 3 };

        localStorage.arr = JSON.stringify(arr);
        localStorage.obj = JSON.stringify(obj);
        console.log(localStorage);

    }

    get.onclick = function () {
        console.log(localStorage.getItem("user"));
        console.log(localStorage.getItem("pwd"));

        console.log(localStorage.phone, localStorage.getItem("phone"));
        console.log(localStorage.email, localStorage.getItem("email"));

        var arrStr = localStorage.getItem("arr");
        var arr = JSON.parse(arrStr);
        console.log(arr);

        var objStr = localStorage.getItem("obj");
        var obj = JSON.parse(objStr);
        console.log(obj);

    }


    del.onclick = function () {
        // localStorage.removeItem("user");
        // localStorage.removeItem("pwd");

        // delete localStorage.phone;
        // delete localStorage.email;

        localStorage.clear();

        console.log(localStorage);
    }

    each.onclick = function () {
        console.log(localStorage);
        // 不建议使用for...in循环遍历  localStorage  => 出现多余属性(方法)
        // for (var key in localStorage) {
        //     console.log(key);
        // }

        // console.log(localStorage.key(0));
        // console.log(localStorage.key(1));
        // console.log(localStorage.key(2));
        // console.log(localStorage.key(3));

        for (var i = 0; i < localStorage.length; i++) {
            var key = localStorage.key(i);
            console.log(key, localStorage[key], localStorage.getItem(key));
        }
    }






</script>

</html>